<template>


	<div class="wrapContainer">
		<div class="container">

			<el-form ref="form" :model="form">
				<el-form-item>
					<el-link type="success" class="title" >{{title}}</el-link>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.password" type="password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="btnLogin" @click="login">登录</el-button>

				</el-form-item>
			</el-form>

		</div>
	</div>





</template>

<script>
	import { mapMutations} from 'vuex'
	export default {
		name: 'Login',
		data() {
			return {
				title:'Redis使用Demo',
				form:{
					username: '',
					password: ''
				}
			}
		},
		methods:{
			...mapMutations(['setToken']),
			login:function(){
				
				this.getReq('/umsUser/token',ret=>{
					this.$message("登录成功");
					console.log(ret);
					//
					this.axios.setToken(ret)
					
					//存储起来
					this.setToken(ret);
					this.$router.push({
					  path: '/'
					})	
				},this.form)
				
				
				
						
			}
		}
	}
</script>

<style scoped>
	.wrapContainer {
		width: 100%;
		height: 100vh;
		/* border: solid 1px  black; */
		background-color: #82848A;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		width: 400px;
		height: 260px;
		/* border: 1px solid green; */
		background-color: white;
		padding: 20px 20px;
		text-align: center;
		border-radius: 10px;
	}
	.title{
		font-size: 30px;
	}
	
	.btnLogin{
		width: 100%;
	}
</style>
